<script setup>
import { ref, reactive } from 'vue'
import { createPlayListAPi } from '@/apis/song'
import { usePlayListStore } from '@/stores/playListStore'
import { useUserInfoStore } from '@/stores/userInfoStore'
import { ElMessage } from 'element-plus'

const usePlayList = usePlayListStore()
const useUserInfo = useUserInfoStore()

const props = defineProps({
  dialogVisible: {
    type: Boolean
  }
})

const emits = defineEmits(['changeVisible'])

const playListName = reactive({ name: '' })
const playListType = ref('NORMAL')
const playListRedio = ref('0')
// 校验规则（歌单名称）
const rules = reactive({
  name: [
    { required: true, message: '请输入歌单名称', trigger: 'blur' },
    { min: 1, max: 30, message: '请输入 1 - 5 长度字符', trigger: 'blur' },
  ]
})

// 创建歌单
const ruleFormRef = ref(null)
const createPlayList = () => {
  // 进行校验
  if (!ruleFormRef.value) return
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      const { data } = await createPlayListAPi({
        name: playListName.name,
        type: playListType.value,
        privacy: playListRedio.value
      })
      emits('changeVisible', false)
      if (data.code === 200) {
        // 更新歌单数据
        usePlayList.getUserPlayList(useUserInfo.userInfo.profile.userId)
        ElMessage({
          message: '创建成功',
          type: 'success'
        })
      } else {
        ElMessage('创建失败')
      }
    }
  })
} 
</script>

<template>
  <div class="my-create-list">
    <el-dialog :model-value="props.dialogVisible" title="新建歌单" width="450">
      <div class="form-box">
        <div class="name">
          <p>歌单名称：</p>
          <el-form :rules="rules" :model="playListName" ref="ruleFormRef" status-icon>
            <el-form-item prop="name">
              <el-input v-model="playListName.name" placeholder="请输入歌单名称" />
            </el-form-item>
          </el-form>
        </div>
        <div class="option-box">
          <p>歌单类型：</p>
          <el-select v-model="playListType" class="m-2" placeholder="Select">
            <el-option label="音乐歌单" value="NORMAL" />
            <el-option label="视频歌单" value="VIDEO" />
            <el-option label="共享歌单" value="SHARED" />
          </el-select>
        </div>
        <div class="redio-box">
          <p>隐私歌单：</p>
          <el-radio-group v-model="playListRedio">
            <el-radio label="10" size="large">
              是
            </el-radio>
            <el-radio label="0" size="large">
              否
            </el-radio>
          </el-radio-group>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="emits('changeVisible', false)">取消</el-button>
          <el-button type="primary" @click="createPlayList">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang='scss'>
.my-create-list {
  .form-box {
    p {
      line-height: 30px;
    }

    .name {

      :deep(.el-input) {
        width: 400px;
      }
    }

    .option-box,
    .redio-box {
      margin-top: 20px;
    }

    .option-box {
      width: 110px;
    }
  }
}

:deep(.el-overlay) {
  background-image: none !important;
  background-color: rgba(239, 239, 239, 0.3) !important;
}
</style>
